<template>
  <div style="margin-top: 30px;padding-bottom: 20px">
    <el-button size="small" @click="resetMbFlow">重置当前用量</el-button>
    <el-table :data="tableData" class="row-main-table" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }">
      <el-table-column prop="beginTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="到期时间"></el-table-column>
      <el-table-column prop="mb" label="套餐拥有用量"></el-table-column>
      <el-table-column prop="virtualUsedMb" label="虚拟用量"></el-table-column>
      <el-table-column prop="packageType" label="套餐类型"></el-table-column>
      <el-table-column prop="actUsedMb" label="实际用量"></el-table-column>
      <el-table-column prop="mealName" label="套餐名字"></el-table-column>
      <el-table-column prop="cardFlowImaginary" label="虚流量系数"></el-table-column>
      <el-table-column prop="insertTimeTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="{ row, rowIndex }">
          <el-button type="primary" slot="reference"@click="deleteFlow(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="row-main-pager"
      :current-page.sync="page.current"
      :page-size="page.size"
      :total="page.total"
      :page-sizes="[5,10,30,50]"
      layout="total, sizes, prev, pager, next, jumper"
      background></el-pagination>
  </div>
</template>

<script>
  import {cardFlowList, deleteCardFlow,resetMbFlow} from '@/api/getData'

  export default {
    name: "cardFlowComponent",
    data() {
      return {
        visible: false,
        loading: false,
        tableData: [],
        page: {
          current: 1,
          size: 5,
          total: 0
        }
      }
    },
    created() {
      this.findList()
    },
    methods: {
      findList() {
        cardFlowList({page: this.page, cardId: this.cardId, flag: this.flag}).then(response => {
          this.tableData = response.data.records
          this.tableData.forEach(v => {
            v.mb = this.$toGB.exe(v.mb)
            v.virtualUsedMb = this.$toGB.exe(v.virtualUsedMb)
            v.actUsedMb = this.$toGB.exe(v.actUsedMb)
          })
          this.page.total = response.data.total
          this.loading = false
        }).catch(e => {
          this.loading = false
        })
      },

      handleCurrentChange(currentPage) {
        this.page.current = currentPage;
        this.findList()
      },
      handleSizeChange(pageSize){
        this.page.current = 1;
        this.page.size = pageSize;
        this.findList()
      },
      deleteFlow(id) {

        this.$confirm('是否删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCardFlow({id}).then(v => {
            this.findList()
          });
        }).catch(() => {

        });

      },
      resetMbFlow(id){
        this.$confirm('是否重置用量？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resetMbFlow({id:this.cardId}).then(v=>{
            this.findList()
          })
        }).catch(() => {

        });
      }
    },
    props: {
      cardId: {
        type: String,
        default: ''
      }
    }

  }
</script>

<style scoped>

</style>
